<template>
  <div>
    <span class="price-icon">￥</span>
    <span class="price">188</span>
    <span class="price-text">/晚</span>
  </div>
  <div class="date">
    <el-date-picker
      v-model="value1"
      type="daterange"
      :range-separator="`${value1 ? '入住' : ''}`"
      :start-placeholder="`${value1 ? vulue1 : '请选择入住时间'}`"
      @change="show"
    />
  </div>
  <div class="user-num">
    <span class="iconfont icon-jurassic_user"></span>
    <span class="user-text">
      <em>1</em>
      位房客
    </span>
    <span class="iconfont icon-xiangzuo"></span>
  </div>
  <div class="additional-costs">可住1人，可加客1人，另外收取10元/人</div>

  <div v-if="isShow">
    <div class="time-price-wrap">
      <div class="time-price">85元x<em>1</em>晚</div>
      <div>
        <span class="time-price-icon">￥</span>
        <span class="time-price-num">85</span>
      </div>
    </div>
    <div class="time-price-wrap">
      <div>
        <span class="time-price">已享优惠</span>
        <span class="every-day">天天特价</span>
      </div>
      <div class="reduce">
        <span class="every-day-icon">-￥</span>
        <span class="reduce-price">17</span>
        <span class="iconfont icon-xiala"></span>
      </div>
    </div>
    <div class="total-price-wrap">
      <div class="total-price">总价</div>
      <div>
        <span>￥</span>
        <span class="total-price-num">68</span>
      </div>
    </div>
  </div>
  <div class="contact-wrap">
    <div class="contact-item">
      <span class="iconfont icon-kuaisuhuifu"></span>
      <div class="contact-text">联系房东</div>
    </div>
    <button class="reserve">立即预定</button>
  </div>
  <div class="footer-wrap">
    <img src="public/erweima.png" class="footer-img" />
    <div>
      <div class="footer-title">微信扫码订优惠多</div>
      <p class="footer-text">扫描二维码，使用微信小程序预订</p>
      <p class="footer-text">有机会享受更多优惠哦~</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotelDetailRight",
};
</script>

<script setup>
import { ref } from "vue";
const value1 = ref("");
const isShow = ref(false);
// 显示总价
const show = () => {
  if (value1.value) {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
};
</script>
<style scoped>
.price-icon {
  font-size: 18px;
  color: #ff4a6d;
}
.price {
  font-size: 32px;
  font-weight: 700;
  color: #ff4a6d;
}
.price-text {
  font-size: 12px;
  color: #585a5a;
}

.date :deep(.el-date-editor) {
  box-shadow: none;
  cursor: pointer;
  background-color: #f5f6fa;
  margin-top: 10px;
  width: 358px;
  padding: 0 8px;
  border-radius: 5px;
}
.icon-jurassic_user {
  color: #c9c9c9;
  font-size: 18px;
  font-weight: 700;
}
.user-num {
  background-color: #f5f6fa;
  padding: 10px 8px;
  margin: 15px 0 8px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  position: relative;
}
.user-text {
  font-size: 14px;
  margin-left: 0;
}
.icon-xiangzuo {
  width: 10px;
  height: 10px;
  font-size: 12px;
  color: #fff;
  background-color: #c9c9c9;
  border-radius: 50%;
  position: absolute;
  right: 8px;
}
.additional-costs {
  font-size: 12px;
  color: #585a5a;
}
.time-price-wrap {
  display: flex;
  justify-content: space-between;
  color: #333;
  padding: 20px 0 10px 0;
  border-bottom: 1px solid #f2f5f7;
}
.time-price {
  font-size: 14px;
}
.time-price-num {
  font-size: 20px;
  font-weight: 700;
}
.every-day {
  font-size: 12px;
  color: #ff4a6d;
  background-color: #ffedf0;
  padding: 3px;
  border-radius: 5px;
  margin-left: 5px;
}
.every-day-icon {
  color: #ff4a6d;
}
.reduce-price {
  font-size: 20px;
  font-weight: 700;
  color: #ff4a6d;
}
.reduce .icon-xiala {
  width: 10px;
  height: 10px;
  font-size: 14px;
  color: #fff;
  background-color: #c9c9c9;
  border-radius: 50%;
}
.total-price-wrap {
  display: flex;
  color: #333;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.total-price {
  font-size: 16px;
  font-weight: 700;
}
.total-price-num {
  font-size: 24px;
  font-weight: 700;
}
.contact-wrap {
  display: flex;
  margin: 20px 0;
  color: #333;
}
.contact-item {
  width: 60px;
  text-align: center;
  border: 1px solid #f5f6f8;
  box-sizing: border-box;
  margin-right: 10px;
  padding: 4px;
}
.icon-kuaisuhuifu {
  font-size: 24px;
}
.reserve {
  width: 302px;
  background-color: #ffdc29;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}
.footer-wrap {
  display: flex;
}
.footer-img {
  width: 140px;
  height: 140px;
  margin-right: 20px;
}
.footer-title {
  font-size: 18px;
  color: #333;
  padding: 12px 0;
  margin-top: 20px;
}
.footer-text {
  font-size: 14px;
  color: #666;
}
</style>
